<template>
  <view class="">
    <uni-forms :modelValue="formData">
      <uni-forms-item label="姓名" name="name">
        <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
      </uni-forms-item>
      <uni-forms-item label="年龄" name="age">
        <input type="text" v-model="formData.age" placeholder="请输入年龄" />
      </uni-forms-item>
      <uni-forms-item required name="hobby" label="兴趣爱好">
        <uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
      </uni-forms-item>
    </uni-forms>
    <button @click="submitForm">Submit</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'


onLoad(() => {
    console.log('onLoad')
});

const formData = ref({
  name: '',
  age: '',
  hobby: []
})
const hobby = ref([
  { text: '篮球', value: 0 },
  { text: '足球', value: 1 },
  { text: '羽毛球', value: 2 },
  { text: '乒乓球', value: 3 },
])
</script>


<style lang="scss">

                  .example {
                    padding: 15px;
                    background-color: #fff;
                  }

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>


